<template>
  <div class="content_box">
    <!-- 公告 -->
    <div class="notice_box">
      <img src="@/assets/tips.png" alt="" />
      <span>公告： </span>
      <p>
        2024-02-10起，平台升级案件规定属性，更加便利查看或编辑，如遇问题，可以向上级反馈！
      </p>
      <span>查看详情 </span>
    </div>
    <div class="main-box">
      <p class="main-title">移交管理</p>

      <!-- 搜索 -->
      <search-component
        :search-options="searchOptions"
        :params="params"
        @search="onSearch"
        @reset="onReset"
      ></search-component>

      <!-- 新增 -->
      <el-button
        style="margin-bottom: 20px"
        size="mini"
        icon="CirclePlus"
        type="primary"
        @click="openJf"
        >创建移交</el-button
      >

      <!-- 列表 -->
      <table-component :columns="columns">
        <div class="list">
          <div class="code">
            <div>
              <p>
                案件编号 x5002308934782363412
                <img src="@/assets/copy.png" alt="" />
              </p>
              <p>案件生成时间 2023-08-20 17:44</p>
            </div>
            <p class="updata">最近更新时间：2天前</p>
          </div>

          <div class="msg">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="aj_msg">
                  <p class="jiao">缴<span class="new">新</span></p>
                  <div class="name">
                    <p class="title">
                      案件名称：重庆西南贷款投资公司涉嫌骗取贷款
                    </p>
                    <p class="text">嫌疑人：张文</p>
                    <div class="label">
                      <el-tag style="margin-right: 8px">待办取保</el-tag>
                      <el-tag>缴费中</el-tag>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="2">
                <el-tag>待缴费</el-tag>
              </el-col>
              <el-col :span="4">
                <p class="unit">南岸区分局花园派出所</p>
              </el-col>
              <el-col :span="3">
                <p class="price">¥10,000.00</p>
              </el-col>
              <el-col :span="2">
                <p class="sjTime">2023-01-26</p>
              </el-col>
              <el-col :span="5">
                <div class="anniu">
                  <el-button size="mini" type="primary" @click="openJf"
                    >申请移交</el-button
                  >
                  <el-button size="mini" type="primary" @click="toSee"
                    >查看</el-button
                  >
                  <el-dropdown>
                    <el-button type="primary" style="margin-left: 12px">
                      更多<el-icon class="el-icon--right"
                        ><arrow-down
                      /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu :split-button="true">
                        <el-dropdown-item>
                          <template #default>
                            <el-button size="mini" type="primary"
                              >现金收款</el-button
                            >
                          </template>
                        </el-dropdown-item>
                        <el-dropdown-item divided
                          >修改主办单位</el-dropdown-item
                        >
                        <el-dropdown-item divided
                          >修改预留银行卡</el-dropdown-item
                        >
                        <el-dropdown-item divided>关闭本案</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </table-component>

      <!-- 分页 -->
      <div class="pagination">
        <!-- <p class="pageNum">显示第1到第10条记录，总共9条记录</p> -->
        <el-pagination
          :page-size="params.current"
          :size="params.size"
          layout="total, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 编辑或新增页 -->
    <el-dialog title="完善信息" v-model="dialog" width="800" >
      <form-model
        :mdl="mdl"
        :parent-id="parentId"
        :handle-close-drawer="handleCloseDialog"
        @getList="getList"
      />
    </el-dialog>
  </div>
</template>
  
  <script setup lang="ts">
import { reactive, watch, ref } from "vue";

import FormModel from "./components/FormModel.vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();

let params = reactive({
  current: 1,
  size: 10,
});
let loading = false;

// 表格的栅格布局
let elColList = [8, 2, 4, 3, 2, 5];

// 表格头部数据
const columns = reactive([
  { name: "案件信息" },
  { name: "移交状态" },
  { name: "办案人员/单位" },
  { name: "移交申请时间" },
  { name: "移交完成时间" },
  { name: "操作" },
]);

columns.forEach((item, index) => {
  item.elCol = elColList[index];
});

const options = reactive([
  { label: "丢安排", value: 0 },
  { label: "嗡嗡嗡", value: 1 },
]);
const searchOptions = [
  {
    label: "案件编号：",
    type: "input",
    prop: "name1",
    placeholder: "请输入",
  },
  {
    label: "保证金金额：",
    type: "input-range",
    prop: "name2",
    prop1: "name3",
    placeholder: "请输入",
  },
  {
    label: "罚没状态：",
    type: "select",
    prop: "name4",
    placeholder: "请选择",
    options,
  },
  {
    label: "嫌疑人姓名：",
    type: "input",
    prop: "name5",
    placeholder: "请输入",
  },
  {
    label: "办案单位：",
    type: "select",
    prop: "name6",
    placeholder: "请选择",
    options,
  },
  {
    label: "案件起始时间：",
    type: "date-range",
    prop: "name7",
    placeholder: "请选择",
    options,
  },
];

// 表单搜索
const onSearch = (searchData) => {
  console.log(searchData);
};

// 表单重置
const onReset = () => {};

/*
 * 弹窗
 */
// 参数
let dialog = ref(false);
let mdl = reactive({});
let parentId = ref<Number>(0);

// 打开弹窗
const openJf = () => {
  dialog.value = true;
};

// 关闭dialog方法
const handleCloseDialog = () => {
  dialog.value = false;
};

/*
 * 查看
 */
const toSee = () => {
  router.push({ name: "BondRefundSee", params: { id: 111 } });
};
</script>
  
  <style lang="scss" scoped>
.pagination {
  width: 100%;
  text-align: right;
  margin-top: 20px;
  ::v-deep .el-pagination {
    justify-content: right;
  }
}
::v-deep .el-drawer__body {
  padding: 0;
}
</style>
    